import React, {Component, createRef, useEffect, useState} from 'react';
import { Addon,Graph } from '@antv/x6';
import {Button, Drawer,Row,Col,Card} from "antd";
import { DataUri } from '@antv/x6'
import SideMenu from "./sidemenu/index";
import Result from "./result/result";



const selectedcells=createRef()

let n=1

const data = {
    // 节点
    nodes: [
        {
            id: 'node1', // String，可选，节点的唯一标识
            x: 40,       // Number，必选，节点位置的 x 值
            y: 40,       // Number，必选，节点位置的 y 值
            width: 80,   // Number，可选，节点大小的 width 值
            height: 40,  // Number，可选，节点大小的 height 值
            label: 'hello', // String，节点标签

        },
        {
            id: 'node2', // String，节点的唯一标识
            x: 160,      // Number，必选，节点位置的 x 值
            y: 180,      // Number，必选，节点位置的 y 值
            width: 80,   // Number，可选，节点大小的 width 值
            height: 40,  // Number，可选，节点大小的 height 值
            label: 'world', // String，节点标签
        },
    ],
    // 边
    edges: [
        {
            source: 'node1', // String，必须，起始节点 id
            target: 'node2', // String，必须，目标节点 id
        },
    ],
};


class App extends Component {
    constructor() {
        super();
        this.graph=null;
        this.dnd=null;
        this.state={
            selectcell:null,
            selectcelldetail:null,
            json : null,
        };
    }
    componentDidMount() {
        this.graph = new Graph({
            container: document.getElementById('container'),
            width: '100%',
            height: 600,
            panning:false,
            selecting: {
                enabled:true,
                rubberband: true,
                showNodeSelectionBox:true,
                showEdgeSelectionBox:true
            },
            keyboard: {
                enabled: true,
            },
            scroller: {
                enabled: true,
            },
            minimap: {
                enabled: true,
                container:  document.getElementById('minimapContainer'),
                width: 200,
                height: 300,

            }
        });
        this.dnd=new Addon.Dnd({
            target:this.graph,
            scaled: false,
            animation: true,

        });

        this.graph.fromJSON(data);
        this.graph.on('blank:contextmenu', ({ e, x, y }) => { console.log(e,x,y)});
        this.graph.on('cell:selected', ( {
            cell,node,option
        }) => {
            // console.log('cell',cell);
            // console.log('node',node);
            // console.log('option',option);
            // code here
            this.Dex(cell)
            this.setState({
                selectcell:cell.id,
                selectcelldetail:cell
            });
            console.log(this.state.selectcell);
            // selectedcells.current=cell;
            // console.log('selected',selectedcells.current);

        });
        this.graph.on('cell:unselected', ( {
            cell,node,option
        }) => {
            // console.log('cell',cell);
            // console.log('node',node);
            // console.log('option',option);
            // code here
            this.Dex(cell);
            this.setState({
                selectcell:null,
                selectcelldetail:null

            });
            console.log(this.state.selectcell);
            // selectedcells.current=cell;
            console.log('unselected',selectedcells.current);

        })
        this.graph.bindKey('d',(e)=>{
            // console.log(e);
            if (this.graph.getSelectedCells()[0]){
            this.graph.getSelectedCells()[0].remove();
                console.log("Do delete");
            }
        })
    }
    plus=()=>{
        this.graph.zoom(+0.05);
    }
    minus=()=>{
        this.graph.zoom(-0.05);
    }
    center=()=>{
        this.graph.centerContent();
    }
    toJson=()=>{
        console.log(this.graph.toJSON());
        this.setState({
            json:JSON.stringify(this.graph.toJSON())
        })
    }
    toPNG=()=>{
        this.graph.toPNG((dataUri) => {
            // 下载
            DataUri.downloadDataUri(dataUri, 'chart.png');
        })
    }
    addNode=(props)=>{
        n=n+1;
        this.graph.addNode(
            {
                id: n,
                x: 60,
                y: 60,
                width: 160,
                height: 80,
                label: 'Rect With Ports',
                attrs: {
                    image: {
                        event: 'node:delete',
                        label: 'trash.png',
                        width: 20,
                        height: 20,
                    },
                },
                ports: {
                    groups: {
                        group1: {
                            position: 'top',
                        },
                        group2: {
                            position: 'bottom',
                        },
                    },
                    items:[
                        {
                            id: 'port1',
                            group:'group1',
                            attrs: {
                                circle: {
                                    r: 6,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                },
                            }
                        },
                        {
                            id: 'port2',
                            group:'group2',

                            attrs: {
                                circle: {
                                    r: 6,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                },
                            }
                        },
                        {
                            id: 'port3',
                            group:'group2',
                            attrs: {
                                circle: {
                                    r: 6,
                                    magnet: true,
                                    stroke: '#31d0c6',
                                    strokeWidth: 2,
                                    fill: '#fff',
                                },
                            }
                        },
                    ],
                }
            }
        )
    }
    Dex =(props) => {
        console.log(props,'from Dex');
}

    render() {
        return (
            <div>
                <Result json={this.state.json}/>
                <Row gutter={16}>
                    <Col span={20}>
                        <Card>
                            <div>按D删除节点<SideMenu
                                value={this.state.selectcell}
                                s_cell={this.state.selectcelldetail}
                            /></div>
                            <Button onClick={this.toPNG}>PNG</Button>
                            <Button onClick={this.toJson}>toJSON</Button>
                            <Button onClick={this.addNode}>addNode</Button>
                            <div
                                id="container"
                            />
                        </Card>
                    </Col>
                    <Col span={4}>
                        <Card>
                            <div id="minimapContainer">
                                <p>小地图</p>
                                <Button onClick={this.plus}>++</Button>
                                <Button onClick={this.minus}>--</Button>
                                <Button onClick={this.center}>mid</Button>
                            </div>
                        </Card>

                    </Col>
                </Row>


            </div>
        );
    }
}


// const DetailMenu=(datax)=>{
//     console.log('datax',selectedcells);
//     const [cellx,setCellx]=useState()
//     useEffect(()=>{
//         setCellx(selectedcells.current)
//     },[datax.current])
//     console.log("detailMenu summary=",cellx);
//
//     return (<p>{cellx}cellx</p>)
// }



export default App;